<template>
	<view class="page-content"  :style="{'--main-color-1':configInfo.mainColor,'--main-color-2':configInfo.mainColor1}">
<!-- 		<u-sticky customNavHeight="0">
			<view class="section-bg flex-between p-l-xs p-r-md">
				<u-tabs
					:list="cateList" 
					:activeStyle="{color:'#3f2a17',fontSize:'28rpx'}"
					:inactiveStyle="{fontSize:'26rpx'}"
					:current="onTabCurrent"
					:lineColor="configInfo.mainColor"
					@change="tabChange">
				</u-tabs>
			</view>
		</u-sticky> -->
		<u-sticky customNavHeight="0">
			<view class="user-bar m-md p-md section-bg flex-between radius-10" :class="{'top' : scrollTop > 20}" v-if="userInfo">
				<view class="flex-center">
					<view @click="$util.go('my/my_info',{login:true})">
						<u-avatar :src="userInfo.avatar" size="20"></u-avatar>
					</view>
					<text class="text-sm m-l-xs">{{userInfo.username}}</text>
					<user-auth-icon class="m-l-xs" type="vip" size="30rpx" v-if="userInfo.level > 1"></user-auth-icon>
				</view>
				<view class="text-sm">
					<text class="text-xs">{{configInfo.integral_company}}：</text>
					<text style="color: var(--main-color-2);">{{userInfo.integral}}</text>
					<!-- <text class="text-xs">{{configInfo.integral_company}}</text> -->
				</view>
			</view>
		</u-sticky> 
		
		<view class="cate-grid m-md section-bg radius-10">
			<u-grid
                :border="false"
                col="4"
			>
				<u-grid-item
					v-for="(item,listIndex) in cateList"
					:key="listIndex"
					@click="gridCatClick(item)"
					class="cate-grid_item"
					:class="{'on' : param.category_id == item.cid}"
				>
					<image :src="item.thumb" mode="widthFix" style="width: 80rpx;height: 80rpx;"></image>
					<text class="cate-grid__name text-sm m-t-xs">{{item.name}}</text>
				</u-grid-item>
			</u-grid>
		</view>
		
		<view class="goods-list">
			<m-loading :show="listLoad" :emptyShow="list.data.length <= 0"></m-loading>
			<mall-goods :list="list.data" :config="configInfo" layout="grid" thumbHeight="280rpx"></mall-goods>
			<uni-load-more :status="status" v-if="showLoading"></uni-load-more>
		</view>
		
		<!-- 侧边小工具 -->
		<side-tools :scrollTop="scrollTop">
			<template #items>
				<view class="side-tools_item" @click="$util.go('pages/order_list',{'path':'/mall/','login':true})">
					<m-icon name="shopping-bag-line" size="38rpx"></m-icon>
				</view>
			</template>
		</side-tools>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	
	export default {
		data() {
			return {
				text:'测试文字',
				listLoad:true,
				showLoading:false,
				status:"loading",
				cacheKey:'shopping_goods_list',
				listEmptyShow:false,
				scrollTop:0,
				cate:[],
				onTabCurrent:0,
				onCateId:0,
			}
		},
		
		computed: mapState({
			userInfo: state => state.user.userInfo,
			configInfo: state => state.config.configInfo,
			list: state => state.mall.list,
			param : state => state.mall.param,
			cateParam : state => state.mall.cateParam,
			cateList : state => state.mall.cateList,
		}),
	
		async onLoad(){
			this.getCats()
		},
		onReady(){
			// if(this.$wechat.isWechat()) this.$util.navTitle()
		},
		async onShow(){
			this.getList()
			// let {
			// 	text
			// } = this
			let ceshi = this.text
			ceshi = '已改变'
			// text = '已改变'
		},
		
		// 上拉刷新
		async onPullDownRefresh(){
			await this.getList();
			uni.showToast({
				title:this.$t('app.renovate.success'),
				icon:'none'
			})
			this.cateList.splice(0,0,{'name':'不限','cid':0});

			uni.stopPullDownRefresh();
		},
		
		// 下滑加载
		async onReachBottom(){
			if (this.list.current_page >= this.list.last_page || this.ListLoad){
				this.status="nomore";
				return
			};
			this.status = "loading";
			this.showLoading = true;
			this.getList(this.param.page + 1);
		},
		
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods: {
			...mapActions(['getMallCate','getGoodsList']),
			...mapMutations(['updateMallState']),
			
			// 获取商品分类
			async getCats(){
				let {
					cateParam:param,
				} = this
				await this.getMallCate(param)
			},
			
			// 获取商品列表
			async getList(page = 0){
				if (page) {
					let param = uni.$u.deepClone(this.param)
					param.page = page
					this.updateMallState({
						key: 'param',
						val: param
					})
				}
				await this.getGoodsList(this.param)
				this.listLoad = false
				// console.log(this.list)
			},
			
			go(id,Info){
				uni.navigateTo({
					url: '/mall/pages/detail?id='+id,
					success: function(res) {
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('detailInfo', {
							detailInfo:Info,
						})
					}
				});
			},

			// tab切换
			async tabChange(e){
				this.listLoad = true
				let {
					param
				} = this
				param.category_id = e.cid
				this.updateMallState({
					key: 'param',
					val: param
				})
				await this.getList()
			},
			
			tabbarChange(name){
				uni.navigateTo({
					url: '/pages/'+name+'/'+name
				});
				// this.onTabbar = name
			},
			
			async gridCatClick(item){
				let {
					cid,
					name,
					thumb
				} = item
				let {
					param
				} = this
				if(param.category_id == cid){
					param.category_id = 0
				}else{
					param.category_id = cid
				}
				this.updateMallState({
					key: 'param',
					val: param
				})
				await this.getList()
				console.log(item)
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: var(--theme-page-bg);
	}
	.user-bar{
		transition: margin .1s,box-shadow .1s,border-radius, .1s;
	}
	.user-bar.top{
		margin: 0!important;
		box-shadow: 0px 0px 5px #eee;
		border-radius: 0;
	}
	.m-walletcard{
		margin: 15px 30rpx 0;
		position: relative;
	}
	.order-btn{
		width: 150px;text-align: right;font-size: 18rpx;margin-right: 30rpx;
		.x-btn{
			background-color: var(--main-color-1);
			
		}
	}
	.cate-grid{
		overflow: hidden;
		&_user{
			color: #555;
			// background-color: #f3f3f3;
			border-bottom: 1px solid #f3f3f3;
		}
		&_item.on &__name{
			transition: color .3s;
			color: var(--main-color-2);
			font-weight: bold;
		}
	}
	.goods-list .g-item:nth-child(2n){
		margin-left: 2%;
		margin-right:4%;
	}
</style>
